<template>
  <div class="log-container">
    <div class="coffee-bg"></div>
    <div class="header-actions">
      <el-input v-model="searchUser" placeholder="操作用户" style="width: 180px; margin-right: 16px" />
      <el-date-picker v-model="searchDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-right: 16px" />
      <el-button type="success" icon="el-icon-download" @click="exportLogs">导出Excel</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="clearLogs" style="margin-left: 16px">清空日志</el-button>
    </div>
    <el-table :data="filteredLogs" style="width: 100%; margin-top: 20px" class="coffee-table">
      <el-table-column prop="time" label="时间" width="180" />
      <el-table-column prop="user" label="操作用户" width="120" />
      <el-table-column prop="action" label="操作类型" width="120" />
      <el-table-column prop="detail" label="操作详情" />
    </el-table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      searchUser: '',
      searchDate: [],
      logs: []
    }
  },
  computed: {
    filteredLogs() {
      return this.logs.filter(log => {
        const matchUser = !this.searchUser || log.user.includes(this.searchUser)
        let matchDate = true
        if (this.searchDate && this.searchDate.length === 2) {
          const t = new Date(log.time).getTime()
          const start = new Date(this.searchDate[0]).getTime()
          const end = new Date(this.searchDate[1]).getTime()
          matchDate = t >= start && t <= end
        }
        return matchUser && matchDate
      })
    }
  },
  methods: {
    exportLogs() {
      const data = this.filteredLogs.map(log => ({
        时间: log.time,
        操作用户: log.user,
        操作类型: log.action,
        操作详情: log.detail
      }))
      const ws = XLSX.utils.json_to_sheet(data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, '操作日志')
      XLSX.writeFile(wb, '操作日志.xlsx')
    },
    clearLogs() {
      this.$confirm('确定要清空所有操作日志吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        localStorage.removeItem('operationLogs')
        this.logs = []
        this.$message.success('日志已清空')
      }).catch(() => {
        // 用户点击取消按钮时，不执行任何操作
      })
    },
    loadLogs() {
      this.logs = JSON.parse(localStorage.getItem('operationLogs') || '[]').reverse()
    }
  },
  created() {
    this.loadLogs()
  }
}
</script>

<style scoped>
.log-container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #e7d2ba 0%, #b08968 100%);
  position: relative;
  overflow: hidden;
}
.coffee-bg {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2615.png') repeat 0 0/120px auto;
  opacity: 0.06;
}
.header-actions {
  display: flex;
  align-items: center;
  z-index: 1;
}
.el-button--success {
  background: linear-gradient(90deg, #b08968 0%, #a47149 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}
.el-button--danger {
  background: linear-gradient(90deg, #a47149 0%, #7c4f22 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
}
.el-input__inner {
  background: #f8f5f2;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
}
.el-date-editor.el-input__inner {
  background: #f8f5f2;
  border-radius: 8px;
  border: 1px solid #e0c3a0;
}
.coffee-table {
  background: rgba(255,255,255,0.96);
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(124, 79, 34, 0.08);
  overflow: hidden;
}
.coffee-table th, .coffee-table td {
  background: transparent !important;
}
</style> 